<template>
    <div class="input-contrainer">

        <div class="input-content">
            <n-button class="send-voice" circle>
                <n-icon size="40">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M12 15c1.66 0 2.99-1.34 2.99-3L15 6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 15 6.7 12H5c0 3.42 2.72 6.23 6 6.72V22h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" fill="currentColor"></path></svg>
                </n-icon>
            </n-button>
            <n-input v-model=input_text round :autosize="{minRows:1,maxRows:2}" type="textarea" class="input-text" placeholder="请输入文字..." />
            <n-button @click="selectPicture" class="send-picture" circle>
            <n-icon size="40">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3l150.1 178L658.1 489L888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z" fill-opacity=".8" fill="currentColor"></path><path d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z" fill-opacity=".1" fill="currentColor"></path><path d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 1 1 0 176a88 88 0 0 1 0-176z" fill-opacity=".1" fill="currentColor"></path><path d="M276 368a28 28 0 1 0 56 0a28 28 0 1 0-56 0z" fill-opacity=".1" fill="currentColor"></path><path d="M304 456a88 88 0 1 0 0-176a88 88 0 0 0 0 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28s-28-12.5-28-28s12.5-28 28-28z" fill-opacity=".8" fill="currentColor"></path></svg>
            </n-icon>

            </n-button>
            <n-button @click="sendMessage" class="send-message" circle>
                <n-icon size="35">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path d="M435.9,64.9L68.8,224.9c-6.5,3.1-6.3,12.4,0.3,15.3l99.3,56.1c5.9,3.3,13.2,2.6,18.3-1.8l195.8-168.8
		c1.3-1.1,4.4-3.2,5.6-2c1.3,1.3-0.7,4.3-1.8,5.6L216.9,320.1c-4.7,5.3-5.4,13.1-1.6,19.1l64.9,104.1c3.2,6.3,12.3,6.2,15.2-0.2
		L447.2,76C450.5,68.8,443,61.5,435.9,64.9z"></path></g></svg>
                </n-icon>
            </n-button>
        </div>
    </div>
</template>

<script>

// todo 需要看组件中数据传递
import {NDrawer,NButton, NIcon, NInput} from 'naive-ui'
import {ref, inject} from 'vue'
export default {
    components:{
        NDrawer,NButton,NIcon,NInput
    },
    setup(){
        let isHidden = ref(true)
        let input_text = ref('')
        // let url = inject("url")
        console.log(url)
        const sendMessage = ()=>{

        }
        const selectPicture = ()=>{

        }
        // // todo 需要看websocket
        // let ws = new WebSocket(url)
        return{
            isHidden, input_text,
            selectPicture, sendMessage
        }
    }

}
</script>

<style scoped>
    .hidden{
        display: none;
    }
    .hidden-content{
        background-color: antiquewhite;
        width: 100vw;
        height: 300px;
        position: relative;
        bottom: 45px;
    }
    .input-content{
        /* background-color: aqua; */
        width: 100vw;
        /* position: relative; */
        /* left: 0; */


    }
    n-button{
        border: none;
    }
    .send-voice{
        position: absolute;
        left: 5px;
        bottom: 5px;

    }
    .input-text{
        width: 60%;
        position: absolute;
        left: 60px;
        bottom: 5px;
    }
    .send-picture{
        position: absolute;
        right: 50px;
        bottom: 5px;
    }
    .send-message{
        position: absolute;
        right: 5px;
        bottom: 5px;
    }
</style>
